<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="20rem"
    @onCommit="handleSubmit"
    @onCloesa="closeDlog"
    destroy-on-close
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="96px"
          >
            <el-form-item label="分析结果：" prop="dealStatus">
              <el-radio-group v-model="form.dealStatus" size="small">
                <div v-if="props.rowData.dealStatus !== '处置中'">
                  <el-radio label="02">处理</el-radio>
                  <el-radio label="04">信息有误</el-radio>
                  <el-radio label="05">挂起</el-radio>
                </div>
                <div v-else>
                  <el-radio label="03">通过</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="维保建议：" prop="dealOpinion">
              <el-input
                :rows="4"
                type="textarea"
                v-model="form.dealOpinion"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="接收人："
              prop="dealUser"
              v-if="form.dealStatus !== '04'"
            >
              <el-input v-model="form.dealUser"></el-input>
            </el-form-item>
            <el-form-item
              label="处置图片："
              prop="fileList"
              v-if="
                props.rowData.dealStatus === '处置中' &&
                form.dealStatus !== '04'
              "
            >
              <el-upload
                v-model:file-list="fileList"
                :action="url"
                ref="uploadFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :headers="{ token }"
                :limit="3"
                ><el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { clearProblem } from '@/api/maintain.js'
import store from '@/store'
const token = store.getters.token
const dialogVisible = ref(false)
const dialogImageUrl = ref()
const uploadFile = ref(null)
const url = ref(process.env.VUE_APP_BASE_API + '/file/upload')
const fileList = ref([])
const filesInfo = ref([])
const userId = ref('')
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  userInfo: {
    type: Object,
    default: () => {}
  },
  problemNo: {
    type: Object,
    default: () => {}
  },
  id: {
    type: Object,
    default: () => {}
  }
})

const showPeo = ref(false)

const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  dealOpinion: '', //维保建议
  dealStatus: '', //处理状态
  dealType: '', //处理类型
  dealUser: '', //处理人
  id: '' //处理人id
})
const fileInfoList = reactive({
  fileId: '',
  fileName: '',
  fileSize: '',
  fileUrl: '',
  type: ''
})
const rules = reactive({
  dealStatus: [
    {
      required: true,
      message: '分析结果不能为空',
      trigger: 'change'
    }
  ],
  dealOpinion: [
    {
      required: true,
      message: '维保建议不能为空',
      trigger: 'blur'
    }
  ],
  dealUser: [
    {
      required: true,
      message: '接收人不能为空',
      trigger: 'blur'
    }
  ]
})
const changRadio = (val) => {
  if (val === '3') {
    showPeo.value = true
  } else {
    showPeo.value = false
  }
}
const closeDlog = () => {
  formRef.value.resetFields()
  clearForm()
  emits('onCloes')
}

// 文件相关
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
const handleAvatarSuccess = (file) => {
  console.log('fileList.value', file)
  filesInfo.value.push({
    fileId: file.data.id,
    fileName: file.data.filename,
    fileSize: file.data.size,
    fileUrl: file.data.url,
    type: file.data.contextType
  })
  console.log('fileList.value', file.data)
  console.log('props.rowData', props.rowData)
}
const handleRemove = (file) => {
  console.log(file)
  // arr.value = arr.value.filter((item) => item.fileId !== file.response.data.id)
  filesInfo.value = filesInfo.value.filter((item) => item.id !== file.id)
}

const handleSubmit = () => {
  console.log(userId.value)
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

// const save = async (data) => {
//   console.log(data)
//   const res = await clearProblem({
//     problemNo: props.rowData.problemNo,
//     dealOpinion: data.dealOpinion,
//     dealStatus: data.dealStatus,
//     dealType: data.dealStatus,
//     dealUser: data.dealUser,
//     id: props.rowData.id,
//      fileInfoList: [
//       {
//         fileId: filesInfo.value.id,
//         fileName: filesInfo.value.fileName,
//         fileSize: filesInfo.value.fileSize,
//         fileUrl: filesInfo.value.fileUrl,
//         type: filesInfo.value.type
//       }
//     ]
//   }).then((res) => {
//     message({ type: 'success', message: '保存成功!' })
//     clearForm()
//     emits('onReload')
//   })
// }

const save = async (data) => {
  console.log(props.rowData)
  if (props.rowData.dealStatus === '处置中') {
    const res = await clearProblem({
      problemNo: props.rowData.problemNo,
      dealOpinion: data.dealOpinion,
      dealStatus: data.dealStatus,
      dealType: data.dealStatus,
      dealUser: data.dealUser,
      id: props.rowData.id,
      fileInfoList: filesInfo.value
    }).then((res) => {
      console.log(data.dealStatus)
      message({ type: 'success', message: '保存成功!' })
      clearForm()
      emits('onReload')
    })
  } else {
    const res = await clearProblem({
      problemNo: props.rowData.problemNo,
      dealOpinion: data.dealOpinion,
      dealStatus: data.dealStatus,
      dealType: data.dealStatus,
      dealUser: data.dealUser,
      id: props.rowData.id
    }).then((res) => {
      message({ type: 'success', message: '保存成功!' })
      clearForm()
      emits('onReload')
    })
  }
}

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.dealOpinion = ''
  form.dealStatus = ''
  form.dealType = ''
  form.dealUser = ''
  form.id = ''
}
</script>

<style lang="scss" scoped>
.font {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 13px;
  .right-form {
    span {
      width: 26px;
      height: 15px;
    }
  }
}

:deep(.el-input--suffix) {
  width: 209px;
}
</style>
